<script setup lang="ts">
import { ref } from "vue";
import EChartsComponent from "@/components/EChartsComponent/index.vue";

defineOptions({
  name: "sendOutGoods"
});
const data = ref([
  {
    name: "张三",
    value: 10
  },
  {
    name: "里斯",
    value: 20
  }
]);

const barData = ref([
  { name: "31313", value: 100000 },
  { name: "Tue", value: 200 },
  { name: "Wed", value: 150 },
  { name: "Thu", value: 80 },
  { name: "Fri", value: 70 },
  { name: "Sat", value: 110 },
  { name: "Sun", value: 130 }
]);
const option = ref({
  title: {
    text: "剩余油量表",
    style: {
      fill: "#fff"
    }
  },
  series: [
    {
      type: "gauge",
      data: [{ name: "itemA", value: 55 }],
      center: ["50%", "55%"],
      axisLabel: {
        formatter: "{value}%",
        style: {
          fill: "#fff"
        }
      },
      axisTick: {
        style: {
          stroke: "#fff"
        }
      },
      animationCurve: "easeInOutBack"
    }
  ]
});
const config = {
  data: [
    ["行1列1", "行1列2", "行1列3"],
    ["行2列1", "行2列2", "行2列3"],
    ["行3列1", "行3列2", "行3列3"],
    ["行4列1", "行4列2", "行4列3"],
    ["行5列1", "行5列2", "行5列3"],
    ["行6列1", "行6列2", "行6列3"],
    ["行7列1", "行7列2", "行7列3"],
    ["行8列1", "行8列2", "行8列3"],
    ["行9列1", "行9列2", "行9列3"],
    ["行10列1", "行10列2", "行10列3"]
  ],
  headerBGC: "#fff",
  oddRowBGC: "#fff",
  evenRowBGC: "#fff",
  bodyStyle: {
    fontSize: 14,
    color: "#000" // 表体字体颜色
  }
};
</script>

<template>
  <div class="flex flex-col">
    <h1 class="text-center text-2xl font-bold mb-4 text-gray-800">到货看板</h1>
    <div class="flex flex-row">
      <div class="w-3/5">
        <dv-scroll-board :config="config" class="h-lvh" />
      </div>
      <div class="w-2/5">
        <EChartsComponent :data="data" type="pie" />
        <EChartsComponent :data="data" type="pie" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
